<!--
 * @Author: luosi 1297957337@qq.com
 * @Date: 2024-11-21 16:26:08
 * @LastEditors: huang liang miao 1127255342@qq.com
 * @LastEditTime: 2024-12-18 08:51:58
 * @FilePath: \sr_system_manager_ui\src\views\achievementReward\assessmentReward\researchReward\index.vue
 * @Description: 科研奖励列表
-->
<template>
  <div class="research-reward-container">
    <TableForm ref="tableRef" :data="dataList" :columns="columns" :tableLoading="loading" :total-count="total"
      :hide-right-first-btn="true"
      :hide-right-second-btn="true"
      :hide-right-third-btn="true"
      :hide-right-forth-btn="true"
      :showPagination="true" :showRowSelection="true" :showToolBar="true" @refresh="getData">
      <template #leftMenu>
        <el-button type="primary" @click="handleEdit({}, 'add')" v-hasPermi="['achievementReward:assessmentReward:researchReward:addReward']">新增奖励</el-button>
      </template>
      <template #status="{ record }">
        <div class="flex items-center space-x-[8px]">
          <span class="h-[6px] w-[6px] rounded-[3px]"
            :style="{ backgroundColor: assessmentStatusBgColorMap[record.status as keyof typeof assessmentStatusBgColorMap] }" />
          <span
            :style="{ color: assessmentStatusBgColorMap[record.status as keyof typeof assessmentStatusBgColorMap] }">{{
              rewardStatusMap[record.status as keyof typeof rewardStatusMap] }}</span>
        </div>
      </template>
      <template #default="{ record }">
        <el-button link type="primary" @click="handleEdit(record, 'view')" v-hasPermi="['achievementReward:assessmentReward:researchReward:view']">查看</el-button>
        <el-button v-if="record.status === 1" link type="primary" @click="handleEdit(record, 'edit')" v-hasPermi="['achievementReward:assessmentReward:researchReward:edit']">编辑</el-button>
        <el-button v-if="record.status === 1" link type="primary" @click="handleStart(record)" v-hasPermi="['achievementReward:assessmentReward:researchReward:startReward']">开启奖励</el-button>
        <el-button v-if="record.status !== 1" link type="primary" @click="handleResult(record.year)" v-hasPermi="['achievementReward:assessmentReward:researchReward:rewardResult']">奖励结果</el-button>
        <el-button v-if="record.status === 2" link type="danger" @click="handleFinish(record)" v-hasPermi="['achievementReward:assessmentReward:researchReward:endReward']">结束奖励</el-button>
        <el-button v-if="record.status === 1" link type="danger" @click="handleDelete(record)" v-hasPermi="['achievementReward:assessmentReward:researchReward:del']">删除</el-button>
      </template>
    </TableForm>

    <!-- 新增/编辑/查看 -->
    <EditModal v-if="editVisible" :visible="editVisible" :id="currentRow.id" :type="currentType" @cancel="editCancel" />

    <!-- 删除提示 -->
    <DelConfirmModal v-if="delVisible" :visible="delVisible" :loading="delLoading" @cancel="delVisible = false"
      @ok="deleteReward({ id: currentRow.id })" />

    <!-- 开启奖励提示 -->
    <DelConfirmModal v-if="startVisible" :visible="startVisible" :text="`是否确定开启${currentRow.name}？`" ok-type="primary"
      ok-text="开启" @cancel="startVisible = false" @ok="updateReward({ id: currentRow.id, status: 2 })" />

    <!-- 结束奖励提示 -->
    <DelConfirmModal v-if="finishVisible" :visible="finishVisible" :text="`是否确定结束${currentRow.name}？`" ok-text="结束"
      @cancel="finishVisible = false" @ok="updateReward({ id: currentRow.id, status: 3 })" />

  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { rewardDelete, rewardPage, rewardUpdateStatus } from '@/api/assessment';
import EditModal from './components/EditModal.vue';
import { rewardStatusMap, assessmentStatusBgColorMap } from '@/utils/constText'
import { BaseSuccessRespDTO, PageBeanRewardPageRespVO, RewardPageRespVO, RewardUpdateStatusReqDTO } from '@/api/assessment/types';
import formatDate from '@/utils/formateDate';

const router = useRouter()

const tableRef = ref()
const dataList = ref<RewardPageRespVO[]>([])
const total = ref(0)
const columns = ref([
  {
    title: '序号',
    width: 48,
    formatter: (row: any, column: any, cellValue: any, index: number) => {
      return index + 1
    }
  },
  {
    title: '名称',
    minWidth: 300,
    dataIndex: 'name',
  },
  {
    title: '奖励年度',
    width: 120,
    dataIndex: 'year',
    formatter: (row) => {
      return `${row.year}年度`
    }
  },
  {
    title: '起止时间',
    width: 200,
    dataIndex: 'time',
    formatter: (row) => `${formatDate(row.startTime).format('YYYY-MM-DD')}~${formatDate(row.endTime).format('YYYY-MM-DD')}`
  },
  {
    title: '奖励办法',
    minWidth: 300,
    dataIndex: 'rewardMethodName',
  },
  {
    title: '奖励状态',
    width: 120,
    dataIndex: 'status',
    slotName: 'status'
  },
  {
    title: '操作',
    width: 240,
    dataIndex: 'default',
    slotName: 'default',
  }
])

// 新增/编辑
const editVisible = ref(false)
const currentRow = ref<RewardPageRespVO>({})
const currentType = ref('')

// 删除
const delVisible = ref(false)
// 开启/结束 奖励
const startVisible = ref(false)
const finishVisible = ref(false)

const { run: getData, loading } = useRequest(rewardPage, {
  manual: true,
  onSuccess: (res: PageBeanRewardPageRespVO) => {
    const { content, totalElements } = res || {}
    dataList.value = content || []
    total.value = totalElements || 0
  }
})

const { run: deleteReward, loading: delLoading } = useRequest(rewardDelete, {
  manual: true,
  onSuccess: (res: BaseSuccessRespDTO) => {
    if (res?.isSuccess) {
      delVisible.value = false
      ElMessage({
        message: '删除成功!',
        type: 'success',
        plain: true,
      })
      tableRef.value?.refreshInitPage()
    }
  }
})

const { run: updateReward } = useRequest(rewardUpdateStatus, {
  manual: true,
  onSuccess: (res: BaseSuccessRespDTO, params: RewardUpdateStatusReqDTO) => {
    if (res?.isSuccess) {
      startVisible.value = false
      finishVisible.value = false
      ElMessage({
        message: `${params[0].status === 2 ? '开启' : '结束'}成功!`,
        type: 'success',
        plain: true,
      })
      tableRef.value?.refreshInitPage()
    }
  }
})

const handleEdit = (row: RewardPageRespVO, type: string) => {
  currentRow.value = row
  currentType.value = type
  editVisible.value = true
}

const editCancel = (isUpdate: false) => {
  editVisible.value = false
  if (isUpdate) {
    tableRef.value?.refreshInitPage()
  }
}

const handleDelete = (row) => {
  currentRow.value = row
  delVisible.value = true
}

const handleStart = (row) => {
  currentRow.value = row
  startVisible.value = true
}

const handleFinish = (row) => {
  currentRow.value = row
  finishVisible.value = true
}

const handleResult = (year: number) => {
  router.push({
    path: '/achievementReward/assessmentReward/researchReward/rewardResult',
    query: { year }
  })
}

onMounted(() => {
  tableRef.value?.refreshInitPage()
});
</script>

<style scoped lang="scss">
.research-reward-container {
  --at-apply: px-[20px] pb-[20px] bg-white rounded-[4px];
}
</style>